<template>
  <div class="app-container">
    <!-- 添加或修改请假业务对话框 -->
    <el-form ref="form" :model="form" :rules="rules" :inline="true"  class="demo-form-inline">
      <el-form-item label="编号" prop="number">
        <el-input  v-model="form.number" disabled style="width: 280px;"/>
      </el-form-item>
      <div>
        <el-form-item label="项目名称" prop="projectName" >
          <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled='isdisabled' />
        </el-form-item>
        <el-form-item label="项目地点" prop="projectAddress">
          <el-input :disabled='isdisabled'  v-if="form.projectAddress" v-model="form.projectAddress" placeholder="请输入项目地点" >
            <i v-if="!isdisabled" slot="suffix" class="el-icon-close" @click="loadMap" style="cursor: pointer;"></i>
          </el-input>
        </el-form-item>
      </div>
      <el-table ref="table" :data="applyList" style="width: 100%;margin-bottom:0.125rem" border>
        <el-table-column label="序号" align="center" width="55" prop="xh" type="index"  >
        </el-table-column>
        <el-table-column prop="itemName" label="物品名称" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.itemName" :disabled='isdisabled' ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="specificationModel" label="规格型号" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.specificationModel" :disabled='isdisabled' ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" align="center" width="140">
          <template slot-scope="scope">
            <el-input v-model="scope.row.number" :disabled='isdisabled' type="number" @input="scope.row.number=scope.row.number.replace(/\D|^0/g,'')"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="unity" label="单位" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unity"  @input="scope.row.unity=scope.row.unity.replace(/[^\u4E00-\u9FA5]/g,'')"   :disabled='isdisabled' ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价（元）" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unitPrice" :disabled='isdisabled' @input="scope.row.unitPrice=scope.row.unitPrice.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="总价（万元）" align="center" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.totalPrice" disabled ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="demandDate" label="需求日期" width="250" align="center">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.demandDate"
              type="datetime"
              :disabled='isdisabled'
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" :disabled='isdisabled' ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item label="采购金额" prop="total">
        <el-input v-model="form.total" disabled>
          <i slot="suffix" style="font-style:normal;">万元</i>
        </el-input>
      </el-form-item>
      <el-form-item label="大写" prop="capitalization">
        <el-input v-model="form.capitalization" disabled/>
      </el-form-item>
      <br>
      <el-form-item label="上传附件" prop="attachment" v-if="!(isdisabled&&!form.attachment)">
        <fileUpload v-model="form.attachment" :isDisabled='isdisabled' :limit="5"/>
      </el-form-item>
    </el-form>
    <div v-show="!parentTaskId&&confirmVisible" class="dialog-footer" style="text-align:center">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <div v-show="!parentTaskId&&!confirmVisible" class="dialog-footer" style="text-align:right">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
<!--      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>-->
    </div>
    <!-- 工作流开始 -->
    <verify ref="verifyRef" :taskId="taskId" @submitCallback="submitCallback" :componentName="componentName"
            :taskVariables="taskVariables" :sendMessage="sendMessage"></verify>
    <!-- 工作流结束 -->
  </div>
</template>

<script>
import {listPurchaseApply,getPurchaseApply,delPurchaseApply,addPurchaseApply,updatePurchaseApply} from "@/api/oa/purchaseApply"
import verify from "@/components/Process/Verify";
import {parseTime} from "@/utils/ruoyi";
export default {
  name: "purchaseForm",
  dicts: ['bs_leave_type'],
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String, // 任务id
    confirmVisible:{
      type: Boolean,
      default: true
    }
  },
  components: {
    verify
  },
  data() {
    return {
      componentName: "采购申请",
      applyList: [],
      selectedOptions: [],
      tableData1: [], //表单属性
      isdisabled:true,
      bcbtn:true,
      infoId:"",
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 请假业务表格数据
      leaveList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "主键ID不能为空", trigger: "blur" }
        ],
        number: [
          { required: true, message: "编号不能为空", trigger: "blur" }
        ],
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        projectAddress: [
          { required: true, message: "项目地点不能为空", trigger: "blur" }
        ],
        date: [
          { required: true, message: "日期不能为空", trigger: "blur" }
        ],
        total: [
          { required: true, message: "合计不能为空", trigger: "blur" }
        ],
        capitalization: [
          { required: true, message: "大写不能为空", trigger: "blur" }
        ],
        applicant: [
          { required: true, message: "申请人不能为空", trigger: "blur" }
        ],
        chargePerson: [
          { required: true, message: "部门负责人不能为空", trigger: "blur" }
        ],
        financeDepartment: [
          { required: true, message: "财务部不能为空", trigger: "blur" }
        ],
        president: [
          { required: true, message: "总经理不能为空", trigger: "blur" }
        ],
        chairman: [
          { required: true, message: " 董事长不能为空", trigger: "blur" }
        ],
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},
      processKey:'oa_purchase_apply',
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler (newVal) {
        if(newVal) {
          this.getById()
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    submitCallback(){
      this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getPurchaseApply(this.businessKey)
      this.form = data;
      this.applyList=data.purchaseApplyListVoList;
      if (data.actBusinessStatus.createTime){
        this.form.number=this.processKey + '@' + parseTime(data.actBusinessStatus.createTime, '{y}{m}{d}{h}{i}{s}')
      }
    },
    /** 提交按钮 */
    submitForm() {
      getPurchaseApply(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userId :1
        };
        this.sendMessage = {
          title: "采购申请审批提醒",
          messageContent:
            this.$store.state.user.nickName + "审批通过了采购申请"
        };
      });
      this.$refs.verifyRef.visible = true
      this.$refs.verifyRef.reset()
    },
  }
};
</script>
<style scoped>
/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 横向滚动条 */
  height: 8px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde;
  border-radius: 3px;
}

</style>
